<template>
  <div>
    <!-- 御剑乘风来,除魔天地间!
    <br />
    <router-view></router-view> -->
    <ul>
      <!-- <li><router-link to="/?id=1&name=要要">这是第一个</router-link></li> -->
      <li>
        <router-link :to="{ path: '/', query: { id: 1, name: '要要' } }"
          >这是第一个</router-link
        >
      </li>
      <!-- <li><router-link to="/Er?id=2&name=超超">这是第二个</router-link></li>
      <li> -->
      <li>
        <router-link :to="{ path: '/Er', query: { id: 2, name: '超超' } }"
          >这是第二个</router-link
        >
      </li>
      <li>
        <!-- <router-link to="/San/3/富少超?age=18&name=帅哥"
          >这是第三个</router-link
        > -->
        <router-link
          :to="{
            name: 'San1',
            params: { id: 3, name: '富少超' },
            query: { age: 18, name: '帅哥' },
          }"
          >这是第三个</router-link
        >
      </li>
    </ul>

    <br />
    <hr />
    <router-view></router-view>
  </div>
</template>
<script>

export default {
  name: '',
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
ul {
  display: flex;
  justify-content: space-between;
  margin: 30px;
  li {
    list-style: none;
    width: 200px;
    height: 200px;
  }
}
//模糊匹配
// .aa {
//   background-color: red;
// }
//精确匹配
.bb {
  background-color: yellow;
}
</style>
